<template>
 <div>
   
   <el-row>
     <el-col :span="12" >
     <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
     </el-col>
      <el-col :span="10" :offset="0">
       <!-- <el-button type="primary" icon="el-icon-search" @click="scarch">搜索</el-button> -->
        <el-button type="primary" icon=" el-icon-plus" @click="add">添加</el-button>  
     </el-col>
   </el-row>
   <el-table :data="pageInfo.list" style="width: 100%">
     <el-table-column prop="rid"  label="日期"  width="120"></el-table-column>
     <el-table-column prop="rname"  label="角色"  width="120"></el-table-column>
     <el-table-column prop="remark"  label="备注"  width="120"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini"  @click="edit(scope.row)">编辑</el-button>
        <el-button size="mini"  @click="quanxian1(scope.row)">权限</el-button>
        <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
        <el-button size="mini" type="success" v-if="scope.row.state === 0"  @click="qiyong(scope.row.rid)">启用</el-button>
        <el-button size="mini" type="danger" v-if="scope.row.state === 1"  @click="jinyong(scope.row.rid)">禁用</el-button>

      </template>
    </el-table-column>
  </el-table>
  <!-- 权限 -->
  <!-- :default-expanded-keys="install" 默认选中 -->
  <el-dialog title="设置权限" :visible.sync="quanxian">
  <el-tree ref="menuListTree"
  :data="data"
  show-checkbox
  default-expand-all
  node-key="mid"
  
  :props="defaultProps">
</el-tree>
  <!-- <el-tree
    :data="data"
    show-checkbox
    
    node-key="mid"
    ref="menuListTree"
    highlight-current
    :default-checked-keys="install"
     :props="defaultProps"
    >
  </el-tree> -->
  <div slot="footer" class="dialog-footer">
    <el-button @click="aa">提交</el-button>
    <el-button @click="resetChecked">清空</el-button>
  </div>
</el-dialog>
  <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-count="pageInfo.pages"
      :current-page="pageNum"
      :page-sizes="limits"
      :page-size="pageSize"
      layout="total,sizes, prev, pager, next"
      >
      <!--  -->
    </el-pagination>
    <!-- 表单 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.did" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.hh" autocomplete="off"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>
 </div>
</template>

<script>
  export default {
    
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'remark'
        },
      // 分页
        install:[],
        pageInfo: {
          list:[],
        },form: {},
        rid:"",
        // 表单显示
        dialogFormVisible:false,
        // 查询框
        input:'',
        // 表格的宽
        formLabelWidth: '120px',
        // 条数
        limits:[3, 5, 7],
        pageSize:7,// limits 的第几条
        pageNum:1,// 第几页
        action:'',
        quanxian:false
      }
    },
    created(){
      this.scarch();
    },
    
    methods: {
      submit(){
        this.dialogFormVisible=false;
        this.$http.get('http://localhost:8090'+this.action,{params:{...this.form}}).then(res=>{
          if(res.data==1){
            this.$message("提交成功")
          }
        })
      },
      // 清空
      resetChecked() {
        this.$refs.menuListTree.setCheckedKeys([]);
      },
      // 获取权限
      quanxian1(row){
        this.quanxian=true;
        this.rid=row.rid
        this.treeList();
      },
      aa(){
        this.quanxian=false
        let authority=this.$refs.menuListTree.getCheckedKeys().concat(this.$refs.menuListTree.getHalfCheckedKeys())
        console.log(authority);
        this.$http.get("/role/authority?"+"rid="+this.rid+"&authority="+authority)
      },
      add(){
        this.dialogFormVisible=true;
        this.form={};
        this.action="/role/add"
      },
      treeList(){
        this.$http.get("/menu/allMid",{params:{rid:this.rid}}).then(res=>{
          this.install=res
          console.log(this.install)
          this.$http.get('/menu/quanxian').then(res=>{
          this.data=res
          console.log(this.data)
          let that=this;
            that.$nextTick(() => {
              var that = this;
              this.install.forEach((i,n) => {
                var node = that.$refs.menuListTree.getNode(i);
                console.log(node.isLeaf)
                if(node.isLeaf){
                  that.$refs.menuListTree.setChecked(node, true);
                }
              });
            })
         })
        })
        
    },
      edit(row) {
        this.dialogFormVisible=true;
        this.form=row;
        this.action="/role/update"
      },
      jinyong(uid) {
      this.$http.get('/role/state',{params:{rid:uid,state:0}}).then(res=>{
          if(res){
            this.$message("修改成功")
            this.scarch();
          }
        })
        
      },
       qiyong(uid) {
          this.$http.get('/role/state',{params:{rid:uid,state:1}}).then(res=>{
            if(res){
              this.$message("修改成功")
              this.scarch();
            }
          })
        },scarch(){
        // 获取查询结果
         this.$http.get('/role/finAll', {params: {pageNum: this.pageNum,pageSize:this.pageSize,input:this.input}}).then(res=>{
          this.pageInfo=res
          // this.pageNum=1

        })
      },handleSizeChange(a){
       
        this.pageSize=a

        this.scarch();
      },handleCurrentChange(a){     
        this.pageNum=a  
        this.scarch();
        
      }
      
    }
  }
</script>
